<!--
 * @Author: 谢子健 1075010289@qq.com
 * @Date: 2024-09-17 13:08:44
 * @LastEditors: 谢子健 1075010289@qq.com
 * @LastEditTime: 2024-09-17 20:02:05
 * @FilePath: \ilink-vue-frontend\src\views\Square\LearningSquare\Home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import NormalHeader from "@/components/NormalHeader.vue";
import DetailPage from "./components/DetailPage.vue";
// datasetId为从路由中获取的参数
const props = defineProps({
  datasetId: {
    type: String,
    required: true,
  },
});
</script>

<template>
  <div class="index-container">
    <a-layout>
      <NormalHeader title="数据广场详情页" />
      <div class="scroll-container">
        <DetailPage :datasetid="datasetId" />
      </div>
    </a-layout>
  </div>
</template>

<style scoped lang="scss">
.index-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 占满整个视口高度 */
}

.scroll-container {
  margin-top: 10px;
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 仅在垂直方向上滚动 */
  // padding: 10px; /* 可选：添加内边距 */
  justify-content: center;
}

/* 可选：隐藏滚动条样式（根据需要） */
.scroll-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>
